<template>
  <div>
    <!-- 选择商品 -->
    <div class="product_card">
      <div class="flex justify-between items-center w-[25%]">
        <el-card class="general">
          <el-scrollbar class="set_height">
            <div
              class="item"
              :class="{
                product_active: searchForm.generalId == item.id,
              }"
              v-for="item in generalList"
              :key="item.id"
              @click="clickGeneral(item.id)"
            >
              <el-text
                truncated
                class="w-[5rem] text-center"
                :title="item.name"
              >
                {{ item.name }}
              </el-text>
            </div>
          </el-scrollbar>
        </el-card>

        <el-card class="category mx-1">
          <el-scrollbar class="set_height">
            <div
              class="item"
              :class="{
                product_active: searchForm.categoryId == item.id,
              }"
              v-for="item in categoryList"
              :key="item.id"
              @click="clickCategory(item.id)"
            >
              <el-text
                truncated
                class="w-[5rem] text-center"
                :title="item.categoryName"
              >
                {{ item.categoryName }}
              </el-text>
            </div>
          </el-scrollbar>
        </el-card>

        <!-- <el-card class="w-[42%] px-1">
          <el-scrollbar class="set_height">
            <el-form label-position="top" v-if="specList?.length > 0">
              <el-form-item
                v-for="item in specList"
                :key="item.id"
                :label="item.specsName"
              >
                <el-select
                  v-model="item.selects"
                  :placeholder="`请选择${item.specsName}`"
                  filterable
                  multiple
                  @change="getList()"
                >
                  <el-option
                    v-for="i in item.list"
                    :key="i.id"
                    :label="i.specsValueName"
                    :value="i.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <el-empty description="暂无规格信息" :image-size="80" v-else />
          </el-scrollbar>
        </el-card> -->
      </div>

      <el-card class="w-[73%] ml-1">
        <el-scrollbar class="set_height p-2 box-border">
          <div class="guide_box">
            <el-form v-if="specList?.length > 0" class="guide">
              <el-form-item
                v-for="item in showSpecList"
                :key="item.id"
                :label="item.specsName"
              >
                <div
                  class="spec_item w-full flex justify-between h-[1.5rem] overflow-hidden"
                  :class="{
                    item_more: item.isMore,
                  }"
                >
                  <el-checkbox-group
                    v-model="item.selects"
                    :placeholder="`请选择${item.specsName}`"
                    filterable
                    multiple
                    @change="getList()"
                    class="max-w-[88%]"
                  >
                    <el-checkbox
                      v-for="i in item.showList"
                      :key="i.id"
                      :label="i.specsValueName"
                      :value="i.id"
                    />
                  </el-checkbox-group>

                  <el-button
                    v-if="item.list.length > 6"
                    @click="handleClickItemMore(item)"
                  >
                    {{ item.isMore ? "收起" : "更多" }}
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-form v-if="specList?.length > 4" class="mb-2">
            <el-form-item class="w-full m-0">
              <div
                class="w-full flex justify-center items-center"
                @click="showMoreSpec"
              >
                <el-button
                  type="info"
                  link
                  :icon="!isShowMoreSpec ? 'ArrowDown' : 'ArrowUp'"
                >
                  查看更多筛选条件
                </el-button>
              </div>
            </el-form-item>
          </el-form>

          <el-row :gutter="24">
            <el-col
              :xs="24"
              :sm="12"
              :lg="8"
              v-for="item in tableData"
              :key="item.id"
              class="product_item"
              @click="ChangeProduct(item)"
            >
              <el-card
                shadow="hover"
                class="h-full item_product"
                title="点击选择"
              >
                <div class="title">
                  <el-image
                    src="https://file.supore.cn/1756179252product.png"
                    class="img"
                  />
                  <span>
                    {{ item.categoryName }}
                    -
                    {{ item.typeName }}
                  </span>
                </div>
                <table>
                  <tr>
                    <td>
                      <div class="label">
                        <el-image
                          src="https://file.supore.cn/1756177945product_code.png"
                          class="img"
                        />
                        <span>商品码</span>
                      </div>
                    </td>
                    <td>
                      {{ item.myCode }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="label">
                        <el-image
                          src="https://file.supore.cn/1756178032pinyin.png"
                          class="img"
                        />
                        <span>拼音码</span>
                      </div>
                    </td>
                    <td>
                      {{ item.spelling }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="label">
                        <el-image
                          src="https://file.supore.cn/1756179423inventory.png"
                          class="img"
                        />
                        <span>库&nbsp;&nbsp;&nbsp;存</span>
                      </div>
                    </td>
                    <td>
                      <el-text
                        :type="item.inventory > 0 ? 'success' : 'danger'"
                      >
                        {{ item.inventory }}
                      </el-text>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="label">
                        <el-image
                          src="https://file.supore.cn/1756178068spell.png"
                          class="img"
                        />
                        <span>规&nbsp;&nbsp;&nbsp;格</span>
                      </div>
                    </td>
                    <td>
                      <el-tag
                        type="primary"
                        v-for="(i, _d) in item.specsDescription"
                        :key="_d"
                        class="mr-1 mb-1"
                      >
                        {{ i || "暂无规格" }}
                      </el-tag>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="label">
                        <el-image
                          src="https://file.supore.cn/1756186860price.png"
                          class="img"
                        />
                        <span>价&nbsp;&nbsp;&nbsp;格</span>
                      </div>
                    </td>
                    <td>
                      <span class="text-[red] mr-1">{{
                        item.goodsPrice ? item.goodsPrice.toFixed(2) : 0
                      }}</span>
                      <span>元</span>
                    </td>
                  </tr>
                </table>
              </el-card>
            </el-col>
          </el-row>
          <el-row></el-row>
          <el-empty
            description="暂无符合条件的商品"
            v-if="!tableData || tableData.length == 0"
          />
        </el-scrollbar>
        <PagingQuery
          :page="page"
          :pageSize="pageSize"
          :total="total"
          @getList="getList"
        />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import PagingQuery from "@/components/PagingQuery.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetGoodsTotalCategory,
  GetGoodsCategory,
  ListGoodsByDictType,
  ListGoodsCategorySpecList,
} from "../../wailsjs/go/api/GoodsApi";

onMounted(() => {
  getGeneralList();
});

const emit = defineEmits(["handleChangeOneProduct"]);
const searchForm = ref({
  generalId: null,
  categoryId: null,
});

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
async function getList(e) {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  let specs = cloneDeep(specList.value);
  specs.forEach((item) => {
    item.list = item.list.filter((i) => {
      return item.selects.includes(i.id);
    });
  });
  specs = specs.filter((item) => {
    return item.list.length > 0;
  });

  handleApiResponse(() =>
    ListGoodsByDictType({
      ...searchForm.value,
      page: page.value,
      pageSize: pageSize.value,
      specsList: specs,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log("商品列表信息", res.data.list);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;

      tableData.value.forEach((item) => {
        item.specsDescription = item.specsDescription.split(";");
        item.goodsPrice = item.goodsPrice / 100;
      });
    }
  });
}

// 是否显示更多规格
const isShowMoreSpec = ref(false);
const showMoreSpec = () => {
  isShowMoreSpec.value = !isShowMoreSpec.value;
  if (isShowMoreSpec.value) {
    showSpecList.value = specList.value;
  } else {
    showSpecList.value = specList.value.slice(0, 4);
  }
};

// 1.点击种类
const clickGeneral = (id) => {
  if (id == searchForm.value.generalId) return;

  searchForm.value.generalId = id;
  searchForm.value.categoryId = null;

  getCategoryList();
};

// 2.点击分类
const clickCategory = (id) => {
  if (id == searchForm.value.categoryId) return;

  searchForm.value.categoryId = id;
  getSpecList();
  getList();
};

// 3.点击选中商品
const ChangeProduct = (item) => {
  emit("handleChangeOneProduct", item);
};

const generalList = ref([]);
const categoryList = ref([]);
const specList = ref([]);
const showSpecList = ref([]);
async function getGeneralList() {
  handleApiResponse(() => GetGoodsTotalCategory()).then((res) => {
    if (res.code == 0) {
      generalList.value = res.data.list || [];
      if (generalList.value?.length > 0) {
        clickGeneral(generalList.value[0].id);
      } else {
        getList();
      }
    }
  });
}
async function getCategoryList() {
  categoryList.value = [];
  handleApiResponse(() => GetGoodsCategory(searchForm.value.generalId)).then(
    (res) => {
      if (res.code == 0) {
        // console.log("分类", res);
        categoryList.value = res.data.list || [];
        if (categoryList.value?.length > 0) {
          clickCategory(categoryList.value[0].id);
        } else {
          getList();
        }
      }
    }
  );
}
async function getSpecList() {
  specList.value = [];
  handleApiResponse(() =>
    ListGoodsCategorySpecList({ id: searchForm.value.categoryId })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      specList.value = res.data.list || [];
      specList.value.forEach((item) => {
        item.selects = [];
        item.isMore = false;
        item.showList = item.list.slice(0, 6);
      });

      showSpecList.value = specList.value.slice(0, 4);
    }
  });
}

// 点击单个规格更多
const handleClickItemMore = (item) => {
  specList.value.forEach((i) => {
    if (i.id == item.id) {
      i.isMore = !i.isMore;
      if (i.isMore) {
        i.showList = i.list;
      } else {
        i.showList = i.list.slice(0, 6);
      }
    }
  });
};
</script>

<style scoped lang="scss">
.product_card {
  height: calc(100vh - 5rem);
  @apply text-[0.7rem] flex;

  :deep(.el-card__body) {
    @apply py-0 px-0;
  }

  .general,
  .category {
    @apply w-[49%] h-full;
    .item {
      @apply w-full h-[1.5rem] mb-1 flex justify-center items-center;
      &:hover {
        @apply cursor-pointer text-[white] bg-[var(--theme-color)] font-bold;
        :deep(.el-text) {
          @apply font-bold text-[white];
        }
      }
    }
  }
}
.product_active {
  @apply text-[white] bg-[var(--theme-color)];
  :deep(.el-text) {
    @apply font-bold text-[white];
  }
}

.set_height {
  height: calc(100vh - 7.5rem);
}
.product_item {
  @apply w-full min-h-[11rem] bg-[white] mb-2;
  &:hover {
    @apply cursor-pointer;
  }
  .title {
    @apply w-full h-[1.5rem] flex justify-center items-center font-bold;
  }
  table {
    @apply w-full;
    tr {
      @apply w-full h-[1.8rem];
      border-bottom: 0.1rem solid #ebeef5;
      .label {
        @apply w-[4.2rem] h-full flex justify-center items-center;
        span {
          @apply ml-1 font-bold;
        }
      }
    }
    tr:last-child {
      border-bottom: none;
    }
  }
}
.img {
  @apply w-[0.8rem] h-[0.8rem];
}

.item_product {
  &:hover {
    border: 0.01rem solid var(--theme-color);
  }
}
.guide_box {
  @apply w-full  overflow-hidden;
}

.guide {
  :deep(.el-form-item) {
    border-bottom: 0.01rem dashed #ccc;
  }
  :deep(.el-form-item__label) {
    @apply bg-[#f4fafe] min-w-[4rem] h-[1.5rem] flex  justify-start px-1 mr-1 box-border;
  }
}

.item_more {
  height: 100% !important;
}
</style>